<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>填写问卷</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <link rel="stylesheet" href="/css/showwj.css">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        .el-radio,
        .el-checkbox {
            padding-top: 5px;
            margin-left: 12px;
        }

        .el-textarea {
            max-width: 300px;
        }
    </style>

</head>

<body>
    <div id="quest">
        <div class="la-qe" v-show='isShow' style="display: none;">
            <div class="header">
                <div><span>{% raw %}{{ data.title }}{% endraw %}</span></div>
                <div><span>{% raw %}{{ data.remark }}{% endraw %}</span></div>

            </div>

            <ul class="content-ul" v-if='data.questTp===1'>

                <li class="q-list" v-for='(op,i) in data.optionList'>
                    <div>
                        <span class="ct-num">{% raw %}{{ i+1 }}{% endraw %}</span>.&nbsp;
                        <span class="option-name">{% raw %}{{op.content}}{% endraw %}</span>
                    </div>
                    <div><span class="remark">{% raw %}{{op.remarks}}{% endraw %}</span></div>
                    <div class="select">
                        <template>
                            <el-select v-model="op.value" placeholder="请选择">
                                <el-option v-for="item in data.maxScore" :key="item" :label="item" :value="item">
                                </el-option>
                            </el-select>
                        </template>
                    </div>
                </li>

            </ul>

            <ul class="content-ul" v-if='data.questTp===2'>

                <li class="q-list" v-for='(op,i) in data.list'>
                    <div>
                        <span class="ct-num">{% raw %}{{ i+1 }}{% endraw %}</span>.&nbsp;
                        <span class="option-name">{% raw %}{{op.content}}<span>（{{settypeName(op.type)}}）</span>{% endraw %}</span>
                    </div>
                    <div><span class="remark">{% raw %}{{op.remark}}{% endraw %}</span></div>

                    <template v-if='op.type===1'>
                        <el-radio-group v-model="op.value">
                            <el-radio v-for='childitem in op.options' :key='childitem.id' :label="childitem.content"
                                style="display:block;">
                                {{childitem.content}}</el-radio>
                        </el-radio-group>
                    </template>
                    <template v-if='op.type===2'>
                        <el-checkbox-group v-model="op.value">
                            <el-checkbox v-for='childitem in op.options' :key='childitem.id' :label="childitem.content"
                                style="display:block;"></el-checkbox>
                        </el-checkbox-group>
                    </template>

                    <template v-if='op.type===3'>

                        <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="op.value">
                        </el-input>

                    </template>
                </li>
            </ul>

            <div class="wjpu">
                <button class="layui-btn layui-btn-normal layui-btn-radius" :plain="true" @click="btnSubmit">提交</button>
            </div>
        </div>

        <div id="load" v-if='loading'>
            <div class="loading">
                <span>loading...</span>
            </div>
        </div>


    </div>



    <script src="/js/jquery-3.6.0.min.js"></script>
    <script src="/js/axios.min.js"></script>
    <script src="/layui/layui.js"></script>
    <script src="/js/vue.js"></script>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

    <script>

        new Vue({
            el: '#quest',
            data() {
                return {
                    loading: true,
                    isShow: false,
                    data: {
                        id: 0,
                        title: '',
                        remark: '',
                        questTp: 0,
                        maxScore: 0,
                        optionList: [],
                        list: []
                    }
                }
            },
            mounted() {
                axios.post('/quest/writequest', {
                    id: location.href.substring(location.href.lastIndexOf('/') + 1)
                })
                    .then(res => {
                        res = res.data
                        if (res.err) return;
                        this.data.id = res.id
                        this.data.title = res.title
                        this.data.questTp = res.questTp
                        this.data.remark = res.remark
                        if (res.questTp === 1) {
                            this.data.optionList = res.optionList
                            this.data.maxScore = res.maxScore
                        } else if (res.questTp === 2) {
                            this.data.list = res.list
                        }

                        this.loading = false

                        this.isShow = true

                    }).catch(err => {
                        console.log(err);
                    })
            },
            methods: {
                settypeName:function(typeId){
                    let name='打分题'
                    if(typeId===1){
                        name='单选题'
                    }else if(typeId===2){
                        name='多选题'
                    }else if(typeId===3){
                        name='填空题'
                    }
                    return name
                },
                btnSubmit: function () {
                    let arr = [];
                    let err = 0
                    if (this.data.questTp === 1) {
                        console.log('问卷1');
                        this.data.optionList.forEach(item => {
                            if (item.value === '') err++;
                            arr.push({ id: item.id, value: item.value })
                        })
                    } else if (this.data.questTp === 2) {
                        console.log('问卷2',this.data.list);
                        this.data.list.forEach(item => {
                            console.log('验证值',item.value);
                            if (item.value==='' || item.value.length===0) err++;
                            arr.push({ id: item.id, value: Array.isArray(item.value) ? item.value.join('^') : item.value })
                        })
                    }


                    if (err === 0) {
                        console.log(arr);
                        axios.post('/quest/usersubmt', {
                            id: this.data.id,
                            optionList: arr
                        }).then(res => {
                            res = res.data;
                            console.log(res);
                            if (res.code === 200) {
                                location.reload()
                            } else {
                                this.$message({
                                    type: 'warning',
                                    message: res.msg,
                                    center: true
                                })
                            }

                        })
                    } else {
                        this.$message({
                            type: 'warning',
                            message: '提交失败，请检查还未填的项',
                            center: true
                        })
                    }


                }

            },
        })


    </script>







    <script>
        $('.content-ul').on('click', function (el) {
            if ($(el.target).hasClass('myselect-css')) {
                $(el.target).next().show();
            } else if ($(el.target).hasClass('select-li')) {
                $(el.target).parent().parent().children('.myselect-css').attr('value', $(el.target).text())
                $(el.target).parent().hide();
            } else {
                $('.select-ul').hide();
            }

        })
    </script>
</body>

</html>